<template>
  <div class="content">
      <p class="title" @touchend="edit()">{{editHtml}}</p>
       
  <!-- 写内容 -->
       <ul class="carList">
          <li class="clear" v-for="obj in car">
             <div v-bind:class="{ring:obj.bol}" @touchend="check(obj)">
                  <!-- 显示和隐藏 -->
                  <p class="active" v-show="!obj.bol">
                      <i class="weui-icon-checked"></i>
                  </p>
             </div>
             <div class="left fl">
                <img v-bind:src=obj.src />
             </div>
             <div class="right fr">
                  <p class="listTitle">{{obj.title}}</p>
                  <p>规格：{{obj.format}}</p>
                  <span class="red">¥<span>{{obj.price}}</span></span>
                  <span class="num fr nSpan" v-show="!editBol">X <span>{{obj.num}}</span></span>
                  <div class="edit" v-show="editBol">
                      <p class="ring" id="less" @touchend="lessenFn(obj)">-</p>
                      <p class="ring" id="add" @touchend="addFn(obj)">+</p>
                      <span class="num">{{obj.num}}</span>
                  </div>
             </div>
          </li>
          <li class="add">
              <div class="weui-loadmore again">
                  <i class="weui-loading"></i>
                  <span class="weui-loadmore__tips">正在加载</span>
              </div>
          </li>
       </ul>
 <!-- 加载数据 -->
       <div class="weui-loadmore loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
       </div>
       <div class="bottom clear">
           <!-- 全选 -->
            <div :class="{ring:all}" class="top"  @touchend="checkAll()">
                <p class="active top" v-show="!all">
                    <i class="weui-icon-checked"></i>
                </p>
            </div>
            <span class="fl">全选</span>
           
            <div class="total fl">
                <div class="count">
                  合计: <span>¥ {{count}}</span>
                </div>
                <p>(不含运费)</p>
            </div>
            <!-- 还没做数据绑定 -->
            <a class="fr" @click="jumpFn()">{{del}} &nbsp(&nbsp{{checkNum}}&nbsp)</a>
           
       </div>
  </div>
</template>

<script>
export default {
  data () {
    return { 
        bol:false,//单选的bol     
        car:[],//显示的数据
        editHtml:"编辑",
        editBol:false,//判断是否为编辑或者是完成
        all:false,
        add:false,
        arr:[],
        del:"结算",
        checkNum:0,
        count:0,
        page:1,
        num:4
    }
  },
  created:function(){
      var _this = this;
      setTimeout(function(){//也是稍等一下,再加载,注意点
          _this.dataFn();//默认数据
          $(".loading").css("display","none");
      },300);
      
  },
  ready:function(){
        //下拉加载
        var winH = $(document).height();
        var _this = this;

        $(window).on("scroll",function(){//滚轮事件
            var sT = $(window).scrollTop();
            var liNum = $(".carList li").length;
            var ulH = $(".carList li").height()*liNum;

            if (ulH+sT+10>winH) {//判断是否拉倒底部了
                $(".loading").css("display","none");
                setTimeout(function(){
                    _this.dataFn();
                },1200)
                $(".again").css("display","block");
            }
        })
  },
  methods:{
      dataFn:function(){
            $(".loading").css({"display":"block"});
            var _this = this;
            var url = "http://172.16.18.43/classfiy/data.php?cb=JSON_CALL&";
            if (arguments.length == 0) {//arguments是函数传参的个数,编辑的时候,改变数量
                var str = location.search;
                var type = str.substr(1);
                url += type;
            }else{//是两个参数,要更新数据里面的某些数据
                var type = "update";
                url += "type="+type+"&id="+arguments[0]+"&number="+arguments[1];//拼接,属性和属性之间不能有空格
            }
            setTimeout(function(){//稍后加载数据,注意点
                $.ajax({
                  type:"GET",
                  url:url,
                  dataType:"jsonp",
                  jsonp:"cb",
                  data:{"page":_this.page,"num":_this.num},
                  success:function(data){

                      if (data.length==0) {
                        $(".add i").css("display","none");
                        $(".add>.again").find(".weui-loadmore__tips").text("别扯啦>_<");
                        return;
                      } 
                      _this.page++;  
                      //把data的数组分割
                      for (var i = 0;i < data.length;i++) {
                          _this.car.push(data[i]);    
                      }
                  }
                })              
            })

      },
      edit:function(){
        this.editBol = !this.editBol;
        this.editBol?this.editHtml="完成":this.editHtml="编辑";
        // 切换按钮的删除和结算
        this.editBol?this.del="删除":this.del="结算";
      },
      check:function(obj){
          obj.bol = !obj.bol;

          if(this.arr.indexOf(obj.id)>-1){//表示存在该数据,就删除
              this.arr.splice(this.arr.indexOf(obj.id),1);
          }else{
              this.arr.push(obj.id);//会出现重复???
          }          

          if (!obj.bol) {
              this.checkNum += toNum(obj.num);
              this.count += toNum(obj.price) * toNum(obj.num);
          }else{
              if (this.checkNum <= 1) {return;}
              this.checkNum -= toNum(obj.num);
              this.count -= toNum(obj.price) * toNum(obj.num);
          }

      },
      checkAll:function(){//全选

          var _this = this;
          this.car.map(function(obj){//遍历this.car所有的东西
              _this.check(obj);
          })
      },
      addFn:function(obj){//编辑的时候,数字+1
         var number = ++obj.num;
         this.dataFn(obj.id,number);//更新数据库里面的数量
         if (!obj.bol) {
            this.checkNum++;
            this.count += toNum(obj.price) * 1;
         }
      },
      lessenFn:function(obj){//编辑的时候,数字-1
          if (obj.num <= 1) {return;}
          var number = --obj.num;
          this.dataFn(obj.id,number);
          if (!obj.bol) {
             this.checkNum--;
             this.count -= toNum(obj.price) * 1;
          }
      },
      jumpFn:function(){//判断什么时候,才能跳转

          var _this = this;
          var cNumber = this.checkNum;//被点中的数量
          var arr = this.arr;//可能会出现重复          

          if(this.del=="删除"&&cNumber>0){
              for (var i = 0;i < this.arr.length;i++) {//如果删除多个,还是有问题
                  $(".carList li:nth-child("+arr[i]+")").remove();
                  arr.splice(i-1,1);
                  i--;//注意,一定要i--
              }
              //删除完毕,就清0
              this.count = 0;
              this.checkNum = 0;
          }else if(cNumber>0&&this.del=="结算"){
              location.href="order.html?type=order&num="+arr;//页面跳转
          }else{
              location.href="###";
          }
      }
  },
  computed:{
      all(){
          var len = this.car.length;
          //比较全选
          var num = 0;
          this.car.map(function(obj,i){
              !obj.bol?num += 1:'';//如果是选择就+1,没被选中就不做任何运算
          })
         return num<len?true:false;//有一个是不被选中就为false
      }
  }
}

//转化数据类型
function toNum(data){
  return Number(data);
}
</script>

<style scoped>
    .content p,span{
      font-size: 0.18rem;
    }
    .title{
      font-size: 0.15rem!important;
       position: fixed;
       right: 3%;
       top: 1.5%;
       color: white;
       z-index: 1011;
    }
    .carList{
      padding: 0 3%;
    }   
    .carList li{
      padding: 3% 0;
      list-style: none;
      border-bottom: 1px solid #dbdbdb;
      position: relative;
    }

    .active{
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      text-align: center;
      background-size: 80% 100%;
    }

    .top{
      top: 32.5%!important;
    }
    .weui-icon-checked{
      font-size: 0.2rem!important;
    }
    .weui-icon-checked:before{
      content: '\EA06';
      color: #f29004;
      position: absolute;
      top: -2%;
      left: -16%;
      z-index: 10;
    }
    .ring{
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      text-align: center;
      border: 1px solid #dedede;
      background: #f2f2f2;    
    }
    [class*=" weui-icon-"]:before, [class^=weui-icon-]:before{
        margin-left: 0;
    }
    .left{
      width: 30%;
      margin-left: 7%;
    }
    .left img{
      width: 100%;
    }
    .right{
      width: 60%;
      text-align: left;      
      margin-top: 5%;
      color: gray;
    }
    .right .gray{
      font-size: 0.15rem!important;
      color: gray;
    }
    .listTitle{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .red{
      color: #e02626;
    }
    .add{
      padding: 22%!important;
      border-bottom:none!important;
    }
    .add>.again{
         position: relative;
         margin-top: -38%;
         display: none;
    }
    .add>.again span{
      font-size: 0.15rem;
    }
    .bottom{
      width: 94%;
      background: #f2f2f2;
      padding: 3%; 
      position: fixed;
      bottom: 53px;
      display: fixed;
      vertical-align: middle;
      z-index: 1002;
    }
    .center{
      font-size: 0.18rem;
      margin-top: -3.7%;
      display: inline-block;
    }
    .count span{
      color: #ed601b;
      margin-left: 5%;
    }
    .bottom a{
      padding: 2% 4%;
      font-size: 0.15rem;
      text-decoration: none;
      background: #ee4147;
      color: white;
      text-align: center;
      border-radius: 5px;
      display: inline-flex;
      margin-top: 2%;
    }
    .bottom>span{
      margin:3%  0 0 8%;

    }
    .total{
      width: 30%;
      margin-left: 10%;
    }
    .total p{
      font-size: 0.15rem;
      color: gray;
    }
    .edit {
      width: 40%;
      height: 20px;
      position: relative;
      right: -56%;
      margin-top: -12%;
    }
    .edit p{
      position: absolute;
      display: inline-block;
      top: 0;
      text-align: center;
      font-size: 0.18rem;
      color: #f29004;
      line-height: 0.18rem;
    }
    .edit p:nth-child(1){
      left: 0;
    }
    .edit p:nth-child(2){
      right: 0;
    }
    .edit span{
      margin-left: 45%;
    }
</style>